<!--
 * @Author: shenqi-turbo 774707331@qq.com
 * @Date: 2023-06-26 15:05:20
 * @LastEditors: sqshinibaba 8394017+sqshinibaba@user.noreply.gitee.com
 * @LastEditTime: 2023-12-22 16:16:39
 * @FilePath: /vue-web3/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div id="myEcharts" style="width: 500px;height: 500px;"></div>
  <!-- <div class="container">
     <div class="content">
        <div class="fan-blade" v-for="item in list">
          {{item.state}}
        <div class="fan-blade-son" v-for="childrenItem in item.level ">{{childrenItem}}</div>
        </div> 
      
   </div> 
   </div> -->
   
</template>

<script setup>
import * as echarts from "echarts";
import {ref,onMounted} from 'vue'

let charts = ref(null)

const list = ref(
  [{
    state:11,
    level:[
      'aa' ,'bb','cc'
    ]
  }, 
  {
    state:22,
    level:[
      'dd' ,'ee','ff'
    ]
  }, 
  {
    state:33,
    level:[
      'gg' ,'hh','jj'
    ]
  },]
)

function initChart() {
       charts = echarts.init(document.getElementById("myEcharts"), "purple-passion");

      let option = {
        tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    data: [
      'Direct',
      'Marketing',
      'Search Engine',
      'Email',
      'Union Ads',
      'Video Ads',
      'Baidu',
      'Google',
      'Bing',
      'Others'
    ]
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '30%'],
      label: {
        position: 'inner',
        fontSize: 14
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1548, name: 'Search Engine' },
        { value: 775, name: 'Direct' },
        { value: 679, name: 'Marketing', selected: true },
        { value: 679, name: 'Marketing', selected: true },
        { value: 679, name: 'Marketing', selected: true },
        { value: 679, name: 'Marketing', selected: true },
        { value: 679, name: 'Marketing', selected: true },
        { value: 679, name: 'Marketing', selected: true },

      ]
    },
    {
      name: 'Access From',
      type: 'pie',
      radius: ['45%', '60%'],
      labelLine: {
        length: 30
      },
      label: {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
        backgroundColor: '#F6F8FC',
        borderColor: '#8C8D8E',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#6E7079',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#8C8D8E',
            width: '100%',
            borderWidth: 1,
            height: 0
          },
          b: {
            color: '#4C5058',
            fontSize: 14,
            fontWeight: 'bold',
            lineHeight: 33
          },
          per: {
            color: '#fff',
            backgroundColor: '#4C5058',
            padding: [3, 4],
            borderRadius: 4
          }
        }
      },
      data: [
        { value: 1048, name: 'Baidu' },
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 251, name: 'Google' },
        { value: 234, name: 'Union Ads' },
        { value: 147, name: 'Bing' },
        { value: 135, name: 'Video Ads' },
        { value: 102, name: 'Others' }
      ]
    }
  ]
      };
      charts.setOption(option);
   

    }

onMounted(()=>{
  initChart();
    //设置一个选择器
 let dom  = document.querySelectorAll('.fan-blade')

 let num = dom.length             //个数
 let diameter = 600      //转盘直径
  
 let width = 0           //扇叶元素宽度
 let deg = 360 / num     //每一叶的旋转角度
  
 width = diameter * Math.tan((deg/2) * Math.PI/180)
 let colors = ['#f66b8e', '#ee8a74', '#edb847', '#f9d579', '#dce58f','#d4e396','#a3d9b4','#a3d7c8','#8acbcc','#70b4b8','#6bb0d0','#619dda']
 dom.forEach((e,index)=>{
 console.log(e);
     e.style.width = width + 'px'
     e.style.transform = 'rotateZ('+ (index * (360 / num)) +'deg)'
     e.style.backgroundColor = `${colors[index]}`
 })



})

</script>



<style scoped>
.container{
   position: relative;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: black;
   display: flex;
   justify-content: center;
   /* overflow: hidden; */
   /* border: 20px solid #ffbd72; */
}






.content{
  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) ;

   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   border-radius: 50%;
   overflow: hidden;
}
.fan-blade{
   position: absolute;
   width: 200px;
   height: 50%;
  
   clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
   -webkit-clip-path: -webkit-polygon(50% 100%, 0% 0%, 100% 0%);
   transform-origin: 50% 100%;
 
}

.fan-blade-son {
   position: absolute;
   z-index: 100;
   width: 200px !important;
   height: 50%;
  background-color: blue;
   clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
   -webkit-clip-path: -webkit-polygon(50% 100%, 0% 0%, 100% 0%);
   transform-origin: 50% 100%;
}



</style>
